Skip to main content

CSS Selectors

CSS Selectors are a fast and readable alternative to XPath. They are widely used in Selenium for locating elements when supported.

What are CSS Selectors?​

CSS selectors use the same syntax as CSS used for styling web pages. Selenium can leverage this syntax to locate elements efficiently.

Basic CSS Selector Syntax​

By ID​

#username
driver.findElement(By.cssSelector("#username"));

By Class​

.btn-login
driver.findElement(By.cssSelector(".btn-login"));

By Attribute​

input[name='email']
driver.findElement(By.cssSelector("input[name='email']"));

Advanced CSS Selectors​

Contains (Partial Match)​

input[name*='user']

Starts With​

input[name^='user']

Ends With​

input[name$='name']

Parent–Child Relationship​

Direct Child​

div.form > input

Descendant​

div.form input

nth-child Selector​

ul li:nth-child(2)

⚠️ Use cautiously — index-based selectors are fragile.

CSS vs XPath (Quick Comparison)​

FeatureCSSXPath
SpeedFasterSlightly slower
Text matching❌✅
Traversing up DOM❌✅
ReadabilityHighMedium

Limitations ❌​

  • Cannot locate by visible text
  • Cannot traverse backward (parent)
  • Limited flexibility compared to XPath

Best Practices ✅​

  • Prefer CSS when simple
  • Use XPath for complex DOM traversal
  • Avoid index-based selectors
  • Keep selectors readable

Common Mistakes ❌​

  • Overusing nth-child
  • Using long chained selectors
  • Ignoring uniqueness

Key Takeaways​

  • CSS selectors are fast and clean
  • XPath is more powerful
  • Choose based on use case
  • Simpler locators are more stable